import React, { Component } from "react";
import { Form, Input, Table, Button } from "antd";
import Content from "../../components/Content/Content";
import './screening concurrent.css'

const columns = [
  {
    title: "采集样品编号",
    key: "1",
    dataIndex: "strain_number",
    className: "strain_number"
  },
  {
    title: "菌种类型",
    dataIndex: "other_numberme",
    className: "other_numberme"
  },
  {
    title: "需氧类型",
    dataIndex: "generic_name",
    className: "generic_name"
  },
  {
    title: "近缘菌株",
    dataIndex: "words",
    className: "words"
  },
  {
    title: "分离人",
    dataIndex: "strain_name",
    className: "strain_name"
  },
  {
    title: "分离时间",
    dataIndex: "popular_name",
    className: "popular_name"
  },
  {
    title: "筛选结果",
    dataIndex: "habitat",
    className: "habitat"
  },
  {
    title: "入库时间",
    dataIndex: "potential_use",
    className: "potential_use"
  },
];

const data = [];
for (let i = 0; i < 1; i++) {
  data.push({
    key: i,
    strain_number: `ACCC000${i}`,
    other_numberme: 666666666,
    generic_name: `属名 ${i}`,
    words: `种加词 ${i}`,
    strain_name: `学名 ${i}`,
    popular_name: `俗名 ${i}`,
    habitat: `成分 ${i}`,
    potential_use: `用途 ${i}`,
    operate: `London, Park Lane no. ${i}`
  });
}

class Query_mediumForm extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false
  };

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const hasSelected = selectedRowKeys.length > 0;

    return (
      <div>
        <div className="filtrate">
          <p>
            <span className="span">
              <span className="inputName">采集样品编号</span> <Input placeholder="" style={{ width: 120 }} />
            </span>
            <span className="span">
            <span className="inputName">菌株类型</span> <Input placeholder="" style={{ width: 120 }} />
            </span>
            <span className="span">
            <span className="inputName">需氧类型</span> <Input placeholder="" style={{ width: 120 }} />
            </span>
            <span className="span">
            <span className="inputName">近缘菌株</span> <Input placeholder="" style={{ width: 120 }} />
            </span>
          </p>
          <p>
            <span className="span">
            <span className="inputName">菌株近缘菌株</span> <Input placeholder="" style={{ width: 120 }} />
            </span>
            <span className="span">
            <span className="inputName">分离时间</span> <Input placeholder="" style={{ width: 120 }} />
            </span>
            <span className="span">
            <span className="inputName">筛选结果</span> <Input placeholder="" style={{ width: 120 }} />
            </span>
            <span className="span">
            <span className="inputName">入库时间</span> <Input placeholder="" style={{ width: 120 }} />
            </span>
          </p>
          <p>
            <span className="span">
            <span className="inputName">分离人</span> <Input placeholder="" style={{ width: 120 }} />
            </span>
            <span className="span">
            <Button type="primary" style={{ width: 80 }}>
              查询
            </Button>
          </span>
          </p>

         
        </div>
        <Table
          columns={columns}
          dataSource={data}
          bordered
          style={{ marginLeft: 12 }}
        />
      </div>
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class ConcurrentStatistic extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default ConcurrentStatistic;
